import React, { useState, useMemo, useEffect } from "react";
import "./PromptDirectory.less";
import InfoTooltipIcon from "@/components/InfoTooltipIcon";
import MarkdownRenderer from "@/components/MarkdownRenderer/MarkdownRenderer";
import { Input, Button } from "antd";
import { Icons } from "@/utils/icons";
import { debounce } from "lodash";
import { ReactComponent as GeneratePromptIcon } from "@/assets/images/GeneratePrompt.svg";
import PromptGenerator from "./PromptGenerator";
const { TextArea } = Input;

const TooltipIcon = () => {
  return (
    <InfoTooltipIcon
      titleContent={"开场白"}
      mainContent={
        <div style={{ fontSize: "13px", lineHeight: 1.7 }}>
          <div style={{ color: "#FFFFFF" }}>
            <div> 开场白是用户进入AI应用后自动展示的引导信息。</div>
            <div>
              它的主要目的是帮助用户理解AI应用的用途，以及如何与其进行交互。
            </div>
          </div>
          <div>
            <div>开场白文案为 Markdown 格式，你可以通过 Markdown</div>
            <div> 语法调整文案样式效果，例如：</div>
          </div>
        </div>
      }
      extraContent={
        <div
          style={{
            backgroundColor: "#FAFAFF",
            borderRadius: "8px",
            padding: "12px",
            fontSize: "13px",
            color: "#4551E5",
            lineHeight: 1.7,
          }}
        >
          <div>
            你好，我是你的 <strong>**办公助手**</strong>，我可以帮助你。
          </div>
          <div>1.预定会议室 📌</div>
          <div>2.检索文件 🗂️</div>
          <div>3. 查询员工手册 📖</div>{" "}
        </div>
      }
      tooltipWidth={430} // 测试宽度调整
    />
  );
};

// 创建共享的Props接口
export interface PromptDirectoryProps {
  onChange?: (content: string) => void;
  sharedProps?: any;
}

export const PromptDirectoryConfig: React.FC<PromptDirectoryProps> = ({
  onChange,
  sharedProps,
}) => {
  const [markdown, setMarkdown] = useState(sharedProps?.prePrompt || "");
  const [generatorVisible, setGeneratorVisible] = useState(false);

  // 使用 useMemo 创建防抖的 onChange 回调
  const debouncedOnChange = useMemo(
    () =>
      debounce((value: string) => {
        onChange?.(value);
      }, 300), // 设置防抖延迟为 300ms
    [onChange]
  );

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newValue = e.target.value;
    setMarkdown(newValue);
    debouncedOnChange(newValue); // 调用防抖回调
  };

  const handleOpenGenerator = () => {
    setGeneratorVisible(true);
  };

  const handleCloseGenerator = () => {
    setGeneratorVisible(false);
  };

  const handleApplyGeneratedPrompt = (promptText: string) => {
    setMarkdown(promptText);
    debouncedOnChange(promptText);
  };

  return (
    <div className="prompt-directory-config" {...sharedProps}>
      <div className="prompt-directory-config-header">
        <Icons.Icon1 width={16} height={16} />
        提示词配置 <TooltipIcon />
        <div className="prompt-directory-generator-btn">
          <Button
            type="text"
            icon={<GeneratePromptIcon />}
            onClick={handleOpenGenerator}
            className="generate-prompt-btn"
          >
            生成提示词
          </Button>
        </div>
      </div>
      <p>
        <TextArea
          style={{
            height: "206px",
            padding: "10px",
            fontSize: "14px",
            borderRadius: "5px",
          }}
          value={markdown}
          onChange={handleChange}
        />
      </p>
      <PromptGenerator
        visible={generatorVisible}
        onClose={handleCloseGenerator}
        onGenerate={handleApplyGeneratedPrompt}
      />
    </div>
  );
};

export const PromptDirectoryPreview: React.FC<PromptDirectoryProps> = ({
  sharedProps,
}) => {
  const [markdown, setMarkdown] = useState(sharedProps?.prePrompt || "");

  useEffect(() => {
    setMarkdown(sharedProps?.prePrompt || "");
  }, [sharedProps?.prePrompt]); // 监听 sharedProps 的变化

  return markdown.trim() ? (
    <div className="prompt-directory-preview">
      <div className="prompt-directory-preview-title">预览</div>
      <div className="prompt-directory-preview-content">
        <MarkdownRenderer content={markdown} />
      </div>
    </div>
  ) : (
    <div className="prompt-directory-preview-empty"></div>
  );
};
